<template>
  <div class="shopmean">
    <div class="left_form">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <div class="left">
          <el-form-item
            label="活动名称"
            prop="name"
          >
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item
            label="商品关键字"
            prop="valtext"
          >
            <el-input v-model="ruleForm.valtext" />
          </el-form-item>
          <el-form-item
            label="商品简介"
            prop="desc"
          >
            <el-input
              v-model="ruleForm.desc"
              type="textarea"
            />
          </el-form-item>
          <el-form-item
            label="商品轮播图"
            prop="shopbanner"
          >
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus" />
            </el-upload>
            <el-dialog :visible.sync="ruleForm.bannerVisible">
              <img
                width="100%"
                :src="ruleForm.banner"
                alt=""
              >
            </el-dialog>
          </el-form-item>
          <el-form-item
            label="运费模板"
            prop="send"
          >
            <el-select
              v-model="ruleForm.send"
              placeholder="请选择活动区域"
            >
              <el-option
                label="区域一"
                value="shanghai"
              />
              <el-option
                label="区域二"
                value="beijing"
              />
            </el-select>
            <el-button>添加运费模板</el-button>
          </el-form-item>
        </div>
        <div class="right">
          <el-form-item
            label="活动区域"
            prop="region"
          >
            <el-select
              v-model="ruleForm.region"
              placeholder="请选择活动区域"
            >
              <el-option
                label="区域一"
                value="shanghai"
              />
              <el-option
                label="区域二"
                value="beijing"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="单位"
            prop="company"
          >
            <el-input v-model="ruleForm.company" />
          </el-form-item>
          <el-form-item
            label="商品封面图"
            prop="shopimg"
          >
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus" />
            </el-upload>
            <el-dialog :visible.sync="ruleForm.dialogVisible">
              <img
                width="100%"
                :src="ruleForm.dialogImageUrl"
                alt=""
              >
            </el-dialog>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <!--   <div class="right_form">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="活动区域" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单位" prop="company">
          <el-input v-model="ruleForm.company"></el-input>
        </el-form-item>
        <el-form-item label="商品封面图" prop="shopimg">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="ruleForm.dialogVisible">
            <img width="100%" :src="ruleForm.dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      </el-form>
    </div> -->
  </div>
</template>
<script>
export default {
  name: "Theform",
  data() {
    return {
      ruleForm: {
        name: "",
        region: "",
        send: "",
        valtext: "",
        company: "",
        desc: "",
        dialogImageUrl: "",
        dialogVisible: false,
        banner: "",
        bannerVisible: false
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入活动名称",
            trigger: "blur"
          },
          {
            min: 3,
            max: 5,
            message: "长度在 3 到 5 个字符",
            trigger: "blur"
          }
        ],
        valtext: [
          {
            required: false,
            message: "请输入商品关键字",
            trigger: "blur"
          }
        ],
        company: [{ required: true, message: "请输入单位", trigger: "blur" }],
        region: [
          {
            required: true,
            message: "请选择活动区域",
            trigger: "change"
          }
        ],
        desc: [
          {
            required: false,
            message: "请输入商品简介",
            trigger: "change"
          }
        ],
        shopimg: [{ required: false, message: "提交图片", trigger: "click" }],
        shopbanner: [
          { required: false, message: "提交图片", trigger: "click" }
        ],
        send: [
          {
            required: true,
            message: "请选择物流模块",
            trigger: "change"
          }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      return new Promise((resolve, reject) => {
        this.$refs[formName].validate(valid => {
          if (valid) {
            resolve("submit!");
          } else {
            reject("error submit!!");
            return false;
          }
        });
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
};
</script>
<style lang="scss" scoped>
.shopmean {
  width: 100%;
  height: 60%;
  display: flex;
  .left_form {
    width: 100%;
  }
  .el-form {
    display: flex;

    .left {
      width: 50%;

      padding: 10px;
    }
    .right {
      width: 50%;

      padding: 10px;
    }
  }
}
</style>
